<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="/js/jquery.min.js"></script>
<body>
<form class="layui-form" lay-filter="per2Form" id="add_per2_form" action="" style="padding:15px 10px;" method="post" enctype="multipart/form-data">
   <input type="hidden" name="perId" class="perId">
    <div class="layui-form-item">
        <label class="layui-form-label">权限级别</label>
        <div class="layui-input-block" style="margin-left: 140px;margin-right: 40px;">
            <select name="jibei" id="jibei" lay-filter="yiji">
                <option value="-1">请选择添加级别</option>
                <option value="1">一级类别</option>
                <option value="2">二级类别</option>
                <option value="3">三级类别</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item" id="onePer" style="display: none">
        <label class="layui-form-label">一级菜单</label>
        <div class="layui-input-block" style="margin-left: 140px;margin-right: 40px;">
            <select name="parentid" id="two" lay-filter="erji">
                <option value="-1">请选择权限级别</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item" id="twoPer" style="display:none;">
        <label class="layui-form-label">二级菜单</label>
        <div class="layui-input-block"  style="margin-left: 140px;margin-right: 40px;">
            <select name="parentId" id="three">
                <option value="-1">请选择权限级别</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">权限名称</label>
        <div class="layui-input-block"  style="margin-left: 140px;margin-right: 40px;">
            <input type="text" name="perName" id="perName" required   lay-verify="required" placeholder="请输入权限名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">图标</label>
        <input type="hidden" name="perImage" id="perImage">
        <div class="layui-input-block" style="margin-left: 140px;margin-right: 40px;">
            <input type="text" id="iconPicker" lay-filter="iconPicker" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"> 权限类别</label>
        <div class="layui-input-block"  style="margin-left: 140px;margin-right: 40px;">
            <input type="text" name="perType" id="perType" readonly="readonly" required  lay-verify="required" placeholder="请输入权限类别" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">地址</label>
        <div class="layui-input-block" style="margin-left: 140px;margin-right: 40px;">
            <input type="text" name="perUrl" required  lay-verify="required" placeholder="请输入链接地址" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">标识</label>
        <div class="layui-input-block" style="margin-left: 140px;margin-right: 40px;">
            <input type="text" name="perCode" required  lay-verify="required" placeholder="请输入标识" autocomplete="off" class="layui-input">
        </div>
    </div>
   <!-- <div class="layui-form-item">
        <div class="layui-input-block"  style="margin-left: 140px;margin-right: 40px;">
            <div class="layui-upload">
                <input type="hidden" name="perImage" id="perImage">
                <button type="button" class="layui-btn" id="test1">上传图片</button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="demo1">
                    <p id="demoText"></p>
                </div>
            </div>
        </div>
    </div>-->

    <script>
        var perId = "";
        var perTwoji = "";
        var perThreeji = "";
        var perpd = false;
        var perpdyiji =false;
        var perpderji =false;
        layui.form.render();
        layui.use(['form','upload','iconPicker'], function() {
            var form = layui.form;
             var upload = layui.upload;
            var iconPicker = layui.iconPicker;
            iconPicker.render({
                // 选择器，推荐使用input
                elem: '#iconPicker',
                // 数据类型：fontClass/unicode，推荐使用fontClass
                type: 'fontClass',
                // 是否开启搜索：true/false
                search: true,
                // 点击回调
                click: function (data) {
                    $("#perImage").val(data.icon);
                }
            });


            var time3 = setInterval(function () {
                var a =$("#perImage").val()
                if (a != ""){
                    clearInterval(time3)
                    iconPicker.checkIcon('iconPicker', $("#perImage").val());
                }
            },100)
           /* var uploadInst = upload.render({
                elem: '#test1' //绑定元素
                ,url: 'http://localhost:9999/Permission/PerImg'
                ,accept: 'file' //允许上传的文件类型
                ,size: 50 //最大允许上传的文件大小
          /!*     ,auto: false //选择文件后不自动上传
                ,bindAction: '.layui-layer-btn0'*!/
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                      $('#demo1').attr('src', result); //图片链接（base64）
                     $("#perImage").val( file.name);
                    });
                }
                ,done: function(res){
                    if(res.code > 0){
                        return layer.msg('上传失败');
                    }
                }
            })*/
           var datime =setInterval(function () {
                if ($("#jibei").val() != -1){
                    var jb =$("#jibei").val();
                    if (jb ==1){
                        $("#onePer").hide(10);
                        $("#twoPer").hide(10);
                    }
                    if (jb == 2){
                        $("#two").attr('name','parentId');
                        $("#three").attr('name','parentid');
                        $("#onePer").show(10);
                        $("#twoPer").hide(10);
                    }
                    if (jb == 3) {
                        $("#two").attr('name','parentid');
                        $("#three").attr('name','parentId');
                        $("#onePer").show(10);
                        $("#twoPer").show(10);
                        /*setTimeout(
                            function () {
                                perId = $("#two").val();
                                perpd = false;
                            },80)*/
                    }
                    clearInterval(datime);
                }
            },200)
        form.on('select(yiji)', function(data){
            var q =true;
            if (data.value == 1){
                perpd=true;
                perpdyiji = true;
                $("#two").empty();
                $("#three").empty();
                $("#perType").val("menu")
                $("#onePer").slideUp(250);
               setTimeout(function () {
                   $("#twoPer").slideUp(250);
               },240)

            }
            if (data.value == 2){
                perpd=true;
                perpdyiji = true;
                $("#two").attr("name","parentId")
                $("#three").attr("name","parentid")
                $("#perType").val("menu")
                $("#twoPer").slideUp(250);
                $("#onePer").slideDown(250);
                if (perpd == false || perpdyiji == false){
                setTimeout(function () {
                    $.get("http://localhost:9999/Permission/Peryiji",function(data){

                        $.each(data.data,function(){
                            var opt = $("<option></option>").appendTo("#two");
                            opt.text(this.perName).val(this.perId);
                        });
                          form.render();
                    });

                },240)
                }
                if (perpd == true || perpdyiji == true) {
                    setTimeout(function () {
                        if (perpd == true || perpdyiji == true){
                            $("#two").empty();
                            $.get("http://localhost:9999/Permission/Peryiji",function(data){
                                if (perThreeji == -1 || perTwoji == -1){
                                    var a  ="<option value='-1'>请选择二级权限</option>";
                                    $("#two").append(a);
                                }
                                $.each(data.data,function(){
                                   var opt = $("<option></option>").appendTo("#two");
                                    opt.text(this.perName).val(this.perId);
                                });
                                $("#two").val(perTwoji);
                                form.render();
                            });
                        }
                    },100)
                }
                q =false;
            }
            if (data.value == 3){
                perpd=true;
                perpdyiji = true;
                $("#two").attr("name","parentid")
                $("#three").attr("name","parentId")
                $("#perType").val("permission");
                if (perpd==false || perpdyiji == false){
                setTimeout(function () {
                    $.get("http://localhost:9999/Permission/Peryiji",function(data){
                        $.each(data.data,function(){

                            var opt = $("<option></option>").appendTo("#two");
                            opt.text(this.perName).val(this.perId);
                        });
                        $("#onePer").slideDown(250);
                        form.render();
                    });
                },240)
                }else{
                    setTimeout(function () {
                        if (perpd){
                            $("#two").empty();
                            $("#three").empty();
                            perpderji = true;
                            $.get("http://localhost:9999/Permission/Peryiji",function(data){
                                if (perThreeji == -1 || perTwoji == -1){
                                    var a  ="<option value='-1'>请选择二级权限</option>";
                                    $("#two").append(a);
                                }
                                $.each(data.data,function(){
                                    var opt = $("<option></option>").appendTo("#two");
                                    opt.text(this.perName).val(this.perId);
                                });
                                $("#two").val(perTwoji);
                                form.render();
                            });
                             /*alert(perThreeji);*/
                            $.get("http://localhost:9999/Permission/Pererji",{perId:perTwoji},function(data){
                                if (perThreeji == -1 || perTwoji == -1){
                                    var a  ="<option value='-1'>请选择三级权限</option>";
                                    $("#three").append(a);
                                }
                                $.each(data.data,function(){
                                    var opter = $("<option></option>").appendTo("#three");
                                    opter.text(this.perName).val(this.perId);
                                });
                                $("#three").val(perThreeji);
                                form.render();
                            })
                        }
                    },100)
                }
                form.on('select(erji)', function(data){
                    $("#three").empty();
                    $("#twoPer").slideDown(250);
                    $.get("http://localhost:9999/Permission/Pererji",{perId:data.value},function(data){
                        $.each(data.data,function(){
                            var opter = $("<option></option>").appendTo("#three");
                            opter.text(this.perName).val(this.perId);
                        });
                        form.render();
                    });
                })
                form.render();
                if (q == true) {
                    $("#onePer").slideDown(250);
                }
            }
        })
        })
    </script>
</form>
</body>
</html>               